<template>
  <div id="box">
    <p>搜索结果如下，请做选择：</p>
    <EasyScrollbar :barOption="listBar">
      <ul>
        <li v-for="item in singleList" @click="getSingleCar(item)"><span class="name">{{item.id}}</span> <span class="tip">车辆</span></li>
        <li v-for="item in groupList" @click="getGroupCar(item)" :title="item.name"><span class="name">{{item.name}}</span> <span class="tip">公司</span></li>
      </ul>
    </EasyScrollbar>
  </div>
</template>

<script>
  export default {
    name: 'SearchCarResult',
    data() {
      return {
        listBar: {
          barColor: "#26a2d6",   //滚动条颜色
          barWidth: 4,           //滚动条宽度
          railColor: "#405569",     //导轨颜色
          barMarginRight: 6,     //垂直滚动条距离整个容器右侧距离单位（px）
          barMaginBottom: 0,     //水平滚动条距离底部距离单位（px)
          barOpacityMin: 0.4,      //滚动条非激活状态下的透明度
          zIndex: "auto",        //滚动条z-Index
          autohidemode: true,     //自动隐藏模式
          horizrailenabled: false,//是否显示水平滚动条
        },
      }
    },
    mounted() {

    },
    props: {
      singleList: {
        type: Array,
      },
      groupList: {
        type: Array,
      }
    },
    methods: {
      getSingleCar(car) {
        this.$emit("clickCar", {
          type: 'singleCar',
          info: car
        })
      },
      getGroupCar(item) {
        this.$emit("clickCar", {
          type: 'groupCar',
          info: item
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../static/common/common.scss";

  #box {
    position: absolute;
    width: 288px;
    min-height: 120px;
    top: 46px;
    left: -2px;
    z-index: 1000;
    padding-bottom: 10px;
    @include borderBlur;
    & > p {
      font-size: 12px;
      color: $color-border;
      text-indent: 15px;
    }
    ul {
      list-style: none;
      padding-left: 0;
      margin: 0 0 15px 0;
      max-height: 400px;
      li {
        font-size: $list-font;
        color: $font-color-normal;
        padding-left: 32px;
        background: url("../../../static/images/index/search-icon.png") no-repeat 8px;
        background-size: 18px 18px;
        line-height: 36px;
        cursor: pointer;
        span.name{
          display: inline-block;
          width: 190px;
          vertical-align: middle;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap
        }
        span.tip {
          margin-left: 10px;
          font-size: 13px;
          opacity: 0.6;
        }
        &:hover {
          color: #fff;
        }
      }
    }
  }
</style>
